<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PS2 Controller Emulator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ps2gray: '#C0C0C0',
                        ps2dark: '#333333',
                        ps2red: '#D22B2B',
                        ps2green: '#32CD32',
                        ps2blue: '#1E90FF',
                        ps2yellow: '#FFD700',
                        ps2black: '#1A1A1A',
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .d-pad {
                @apply relative w-32 h-32 mx-auto;
            }
            .d-pad-button {
                @apply absolute bg-ps2black rounded-md flex items-center justify-center transition-all duration-100 active:scale-90;
            }
            .button-press {
                @apply scale-90 shadow-inner;
            }
            .analog-stick {
                @apply w-20 h-20 rounded-full bg-ps2dark border-4 border-gray-700 relative mx-auto transition-all duration-100;
            }
            .analog-dot {
                @apply absolute w-10 h-10 bg-ps2black rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-100;
            }
            .action-button {
                @apply w-14 h-14 rounded-full flex items-center justify-center text-white font-bold text-lg transition-all duration-100 active:scale-90 shadow-lg;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="max-w-4xl mx-auto">
        <!-- Controller Container -->
        <div class="bg-ps2gray rounded-3xl p-8 shadow-2xl border-8 border-ps2black relative overflow-hidden">
            <!-- Controller Body Details -->
            <div class="absolute top-0 left-0 w-full h-4 bg-ps2black opacity-30"></div>
            <div class="absolute bottom-0 left-0 w-full h-4 bg-ps2black opacity-30"></div>
            
            <!-- Controller Layout -->
            <div class="flex flex-col md:flex-row gap-8 items-center">
                <!-- Left Side: D-pad and Left Analog -->
                <div class="flex flex-col items-center gap-10 w-full md:w-1/3">
                    <!-- D-pad -->
                    <div class="d-pad">
                        <div id="up" class="d-pad-button w-10 h-16 top-0 left-1/2 transform -translate-x-1/2">
                            <i class="fa fa-chevron-up text-white text-xl"></i>
                        </div>
                        <div id="down" class="d-pad-button w-10 h-16 bottom-0 left-1/2 transform -translate-x-1/2">
                            <i class="fa fa-chevron-down text-white text-xl"></i>
                        </div>
                        <div id="left" class="d-pad-button w-16 h-10 top-1/2 left-0 transform -translate-y-1/2">
                            <i class="fa fa-chevron-left text-white text-xl"></i>
                        </div>
                        <div id="right" class="d-pad-button w-16 h-10 top-1/2 right-0 transform -translate-y-1/2">
                            <i class="fa fa-chevron-right text-white text-xl"></i>
                        </div>
                        <div class="absolute w-10 h-10 bg-ps2black rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"></div>
                    </div>
                    
                    <!-- Left Analog Stick -->
                    <div class="flex flex-col items-center">
                        <span class="text-ps2black font-bold mb-2">L3</span>
                        <div id="left-analog" class="analog-stick">
                            <div id="left-analog-dot" class="analog-dot"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Middle: Start, Select, Logo -->
                <div class="flex flex-col items-center gap-6 w-full md:w-1/3">
                    <!-- PS2 Logo -->
                    <div class="w-32 h-16 bg-ps2black rounded-lg flex items-center justify-center mb-8">
                        <span class="text-white font-bold text-2xl tracking-wider">PS2</span>
                    </div>
                    
                    <!-- Select and Start -->
                    <div class="flex gap-8 items-center">
                        <div id="select" class="w-10 h-4 bg-ps2black rounded-full transition-all duration-100 active:scale-90"></div>
                        <span class="text-ps2black font-bold text-sm">SELECT</span>
                        <span class="text-ps2black font-bold text-sm">START</span>
                        <div id="start" class="w-10 h-4 bg-ps2black rounded-full transition-all duration-100 active:scale-90"></div>
                    </div>
                    
                    <!-- Shoulder Buttons (Top View) -->
                    <div class="flex justify-between w-full mt-10">
                        <div id="l1" class="w-20 h-6 bg-ps2black rounded-full transition-all duration-100 active:scale-90"></div>
                        <div id="r1" class="w-20 h-6 bg-ps2black rounded-full transition-all duration-100 active:scale-90"></div>
                    </div>
                    
                    <!-- Trigger Buttons -->
                    <div class="flex justify-between w-full mt-2">
                        <div id="l2" class="w-16 h-4 bg-ps2dark rounded-full transition-all duration-100 active:scale-90"></div>
                        <div id="r2" class="w-16 h-4 bg-ps2dark rounded-full transition-all duration-100 active:scale-90"></div>
                    </div>
                </div>
                
                <!-- Right Side: Action Buttons and Right Analog -->
                <div class="flex flex-col items-center gap-10 w-full md:w-1/3">
                    <!-- Action Buttons -->
                    <div class="relative w-40 h-40">
                        <div id="triangle" class="action-button bg-ps2blue absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/4">
                            △
                        </div>
                        <div id="circle" class="action-button bg-ps2red absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-1/4">
                            ○
                        </div>
                        <div id="cross" class="action-button bg-ps2green absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/4">
                            ×
                        </div>
                        <div id="square" class="action-button bg-ps2yellow absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/4">
                            □
                        </div>
                    </div>
                    
                    <!-- Right Analog Stick -->
                    <div class="flex flex-col items-center">
                        <span class="text-ps2black font-bold mb-2">R3</span>
                        <div id="right-analog" class="analog-stick">
                            <div id="right-analog-dot" class="analog-dot"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Connection Indicator -->
            <div class="mt-8 text-center">
                <div class="inline-flex items-center gap-2 bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm">
                    <span class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></span>
                    <span>Controller Connected</span>
                </div>
            </div>
            
            <!-- Controller Status -->
            <div class="mt-6 bg-ps2black text-white p-4 rounded-lg text-sm">
                <h3 class="font-bold mb-2">Controller Status</h3>
                <div id="status" class="grid grid-cols-2 md:grid-cols-4 gap-2">
                    <div class="bg-gray-800 p-2 rounded">No input detected</div>
                </div>
            </div>
        </div>
        
        <!-- Instructions -->
        <div class="mt-8 bg-white p-6 rounded-xl shadow-lg">
            <h2 class="text-xl font-bold text-ps2black mb-4">How to Use</h2>
            <ul class="list-disc pl-5 space-y-2 text-gray-700">
                <li>Click or tap on any button to simulate pressing it</li>
                <li>Drag the analog sticks to simulate movement</li>
                <li>Controller status will show your recent inputs</li>
            </ul>
        </div>
    </div>

    <script>
        // Track button presses and update status
        const statusElement = document.getElementById('status');
        const maxStatusEntries = 4;
        let statusEntries = [];
        
        function updateStatus(button) {
            // Add new status entry
            const now = new Date();
            const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
            statusEntries.unshift(`${timeString}: ${button} pressed`);
            
            // Keep only max entries
            if (statusEntries.length > maxStatusEntries) {
                statusEntries = statusEntries.slice(0, maxStatusEntries);
            }
            
            // Update display
            statusElement.innerHTML = '';
            statusEntries.forEach(entry => {
                const entryElement = document.createElement('div');
                entryElement.className = 'bg-gray-800 p-2 rounded';
                entryElement.textContent = entry;
                statusElement.appendChild(entryElement);
            });
        }
        
        // Handle button presses
        const buttons = ['up', 'down', 'left', 'right', 'triangle', 'circle', 'cross', 'square', 'select', 'start', 'l1', 'r1', 'l2', 'r2'];
        
        buttons.forEach(buttonId => {
            const button = document.getElementById(buttonId);
            if (button) {
                // Mouse events
                button.addEventListener('mousedown', () => {
                    button.classList.add('button-press');
                    updateStatus(buttonId.toUpperCase());
                });
                
                button.addEventListener('mouseup', () => {
                    button.classList.remove('button-press');
                });
                
                button.addEventListener('mouseleave', () => {
                    button.classList.remove('button-press');
                });
                
                // Touch events for mobile
                button.addEventListener('touchstart', (e) => {
                    e.preventDefault();
                    button.classList.add('button-press');
                    updateStatus(buttonId.toUpperCase());
                });
                
                button.addEventListener('touchend', (e) => {
                    e.preventDefault();
                    button.classList.remove('button-press');
                });
            }
        });
        
        // Handle analog sticks
        function setupAnalogStick(stickId, dotId) {
            const stick = document.getElementById(stickId);
            const dot = document.getElementById(dotId);
            let isDragging = false;
            
            // Get stick boundaries
            const stickRect = stick.getBoundingClientRect();
            const stickCenterX = stickRect.width / 2;
            const stickCenterY = stickRect.height / 2;
            const maxDistance = (stickRect.width / 2) - 10; // Keep within stick
            
            // Mouse events
            dot.addEventListener('mousedown', startDrag);
            stick.addEventListener('mousedown', startDrag);
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', endDrag);
            
            // Touch events
            dot.addEventListener('touchstart', (e) => {
                e.preventDefault();
                startDrag(getTouchPosition(e));
            });
            
            stick.addEventListener('touchstart', (e) => {
                e.preventDefault();
                startDrag(getTouchPosition(e));
            });
            
            document.addEventListener('touchmove', (e) => {
                e.preventDefault();
                drag(getTouchPosition(e));
            });
            
            document.addEventListener('touchend', (e) => {
                e.preventDefault();
                endDrag();
            });
            
            function getTouchPosition(e) {
                const touch = e.touches[0];
                return {
                    clientX: touch.clientX,
                    clientY: touch.clientY
                };
            }
            
            function startDrag(e) {
                isDragging = true;
                drag(e);
            }
            
            function drag(e) {
                if (!isDragging) return;
                
                const stickRect = stick.getBoundingClientRect();
                const stickX = stickRect.left + stickCenterX;
                const stickY = stickRect.top + stickCenterY;
                
                // Calculate position relative to stick center
                let deltaX = e.clientX - stickX;
                let deltaY = e.clientY - stickY;
                
                // Calculate distance from center
                const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
                
                // Limit to max distance
                if (distance > maxDistance) {
                    deltaX = (deltaX / distance) * maxDistance;
                    deltaY = (deltaY / distance) * maxDistance;
                }
                
                // Update dot position
                dot.style.transform = `translate(-50%, -50%) translate(${deltaX}px, ${deltaY}px)`;
                
                // Calculate normalized values (-1 to 1)
                const normX = parseFloat((deltaX / maxDistance).toFixed(2));
                const normY = parseFloat((deltaY / maxDistance).toFixed(2));
                
                // Update status
                updateStatus(`${stickId.split('-')[0].toUpperCase()}3 (${normX}, ${normY})`);
            }
            
            function endDrag() {
                if (isDragging) {
                    isDragging = false;
                    // Return to center with animation
                    dot.style.transform = 'translate(-50%, -50%)';
                }
            }
        }
        
        // Setup both analog sticks
        setupAnalogStick('left-analog', 'left-analog-dot');
        setupAnalogStick('right-analog', 'right-analog-dot');
    </script>
</body>
</html>
